<template>
	<view v-if="visible" class="loading-border">
		<view class="mask"></view>
		<view class="loading">
			<view class="icon"></view>
			<view class="text">{{ text || title }}</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		title: { type: String, default: '加载中' }
	},
	data() {
		return {
			visible: false,
			text: ''
		};
	},
	methods: {
		show(text) {
			this.text = text;
			this.visible = true;
		},
		close() {
			this.text = '';
			this.visible = false;
		},
		hide() {
			this.close();
		}
	}
};
</script>

<style lang="less">
.loading-border {
	.mask {
		background: rgba(0, 0, 0, 0.2);
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 1000;
	}
	.loading {
		position: fixed;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 140rpx;
		height: 140rpx;
		background: rgba(0, 0, 0, 0.7);
		border-radius: 12rpx;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		z-index: 1001;
		.icon {
			background-image: url();
			background-position: center;
			background-size: 100%;
			background-repeat: no-repeat;
			width: 44rpx;
			height: 44rpx;
			animation: rotate 0.6s infinite linear;
		}
		.text {
			margin-top: 10rpx;
			height: 40rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #ffffff;
			line-height: 40rpx;
		}
	}
}

@keyframes rotate {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}
</style>
